<template>
  <div class="bg">
    <!-- 1. 搜索区域 -->
    <div class="header">
      <div class="search">
        <input v-focus ref="myInp" v-model="inpVal" type="text" placeholder="请输入你喜欢的音乐" />
        <!-- close -->
        <div class="close" @click="close" v-show='!isShow'>x</div>
      </div>
    </div>
    <!-- 2. 热门搜索 -->
    <div class="list">
      <template v-if='isShow'>
        <div class="title">热门搜索</div>
        <ul class="wrap">
          <li v-for="ele in arr" :key="ele.first">{{ele.first}}</li>
        </ul>
      </template>
      <template v-else>
        <div class="title-search">搜索{{inpVal}}</div>
        <ul class="list-search">
          <li v-for="ele in list" :key='ele.keyword'>
            <i class="u-svg-search"></i>
            <span>{{ele.keyword}}</span>
          </li>

        </ul>
      </template>
    </div>
  </div>
</template>

<script>
import axios from "../../api";
export default {
  data() {
    return {
      arr: [], //热门搜索
      isShow:true,//热门搜索是否显示  true显示
      inpVal:'',
      list:[],//搜索的数据结果
    };
  },
  mounted() {
    // console.log(this.$refs.myInp);
    this.$refs.myInp.focus();
    //获取热门搜索数据
    this.getSearchList();
  },
  //自定义指令---多次使用--
  directives: {
    focus: {
      inserted(el) {
        // console.log(el);
        el.focus();
      }
    }
  },
  methods: {
    async getSearchList() {
      let res = await axios.getSearchList();
      console.log("热门搜索---", res.data.result.hots);
      this.arr = res.data.result.hots;
    },
    //关闭搜索框--清空--------------------
    close(){
      this.inpVal='';

    },
    //封装函数---获取搜索数据接口-------------------------
    async getSearch(params){
      let res = await axios.getSearch(params)
      console.log('搜索数据接口---',res.data);
      console.log(res.data.result.allMatch);
      this.list = res.data.result.allMatch;
    }
  },
  //侦听器--------------------------
  watch:{
      inpVal(val){
        console.log(val);
        if(val){//val值存在 隐藏热门搜索
          this.isShow = false;
         //执行搜索-------------------------------
          this.getSearch({
              keywords:val,
              type:'mobile'
          })

        }else{
          this.isShow = true;
        }
      }
  }
};
</script>

<style scoped lang='less'>
.bg {
  background: #fff;
  min-height: 10rem;
  .header {
    padding: 0.2rem 0.4rem;
    border-bottom: 1px solid #eee;
    .search {
      background: #f0f0f0;
      border-radius: 0.4rem;
      position: relative;
      input {
        width: 100%;
        height: 0.6rem;
        line-height: 18px;
        background: rgba(0, 0, 0, 0);
        font-size: 12px;
        color: #333;
        outline: none;
        border: 0;
        padding-left: 0.16rem;
      }
      .close{
        position: absolute;
        right:0.2rem;
        top:0.14rem;
        color: #eee;
        background: #999;
        width: 0.3rem;
        height: 0.3rem;
        line-height: 0.3rem;
        vertical-align: top;
        border-radius: 50%;
        text-align: center;
      }
    }
  }
  .list {
    padding: 0.2rem;
  }
  .title {
    font-size: 12px;
    line-height: 12px;
    color: #666;
  }
  .wrap {
    li {
      display: inline-block;
      height: 32px;
      margin-right: 8px;
      padding: 0 14px;
      font-size: 14px;
      line-height: 32px;
      color: #333;
      border: 1px solid #eee;
      border-radius: 1.2rem;
      margin-top: 0.2rem;
    }
  }
  .title-search {
    height: 50px;
    margin-left: 10px;
    padding-right: 10px;
    font-size: 15px;
    line-height: 50px;
    color: #507daf;
    border-bottom: 1px solid #eee;
  }
  .list-search {
    li {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      height: 45px;
      padding-left: 10px;
      .u-svg-search {
        width: 15px;
        height: 15px;
        margin-right: 7px;
        background-image: url("");
      }
      span {
        flex: 1;
        width: 1%;
        padding-right: 10px;
        font-size: 15px;
        line-height: 45px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
        border-bottom: 1px solid #eee;
      }
    }
  }
}
</style>